<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bg-container {
        width: 600px;
        height: 400px;
        margin: 100px auto;
      }
      .bg-container img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="background">
      <button data-src="/images/bg1.jpg">bg1.jpg</button>
      <button data-src="/images/bg2.jpg">bg2.jpg</button>
      <button data-src="/images/bg3.jpg">bg3.jpg</button>
    </div>
    <div class="bg-container">
      <img id="bg-image" src="/images/bg1.jpg" />
    </div>
    <script>
      /**
       * 虚拟代理图片预加载
       */
      let background = document.getElementById('background');
      class BackgroundImage {
        constructor() {
          this.bgImage = document.getElementById('bg-image');
        }
        setSrc(src) {
          this.bgImage.src = src;
        }
      }
      class LoadingBackgroundImage {
        static LOADING_URL = '/images/loading.gif';
        constructor() {
          // 一般会在代理类中引用一个目标类实例
          this.backgroundImage = new BackgroundImage();
        }
        setSrc(src) {
          // 立刻把图片的地址改为loading
          this.backgroundImage.setSrc(LoadingBackgroundImage.LOADING_URL);
          let img = new Image();
          // 当img浏览器已经把真实的图片下载到本地之后，浏览器会立刻缓存这张图片
          // 然后我把这个新的的图片路径 付给了<img id= "bg-image">，它会立刻请求src薪图片
          img.onload = () => {
            this.backgroundImage.setSrc(src);
          };
          img.src = src; //把切换的图片传给了 img.src
        }
      }
      let loadingBackgroundImage = new LoadingBackgroundImage();
      background.addEventListener('click', (event) => {
        let src = event.target.dataset.src;
        loadingBackgroundImage.setSrc(src);
      });
    </script>
  </body>
</html>
